let Utils = require("../../framework/js/utils");

require("aui.daterange");
require("./ui_2/radiogroup");
require("./ui_2/checkboxgroup");
require("./ui_2/file");

let passwordtemplate = `
<div class="form-group">
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">
        <h5>修改用户信息表单</h5>
        <hr better/>
    </div>
</div>
</div>

<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    旧密码
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="form-control" type="password"
    v-model="form.data.v1.value"            
    v-input-validate="form.element.v1">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    新密码
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="form-control" type="password" 
    v-model="form.data.v2.value"            
    v-input-validate="form.element.v2">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
(不要少于6位)
</div>
</div>
</div>

<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    确认密码
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="form-control" type="password"
    v-model="form.data.v3.value"            
    v-input-validate="form.element.v3">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <button class="btn btn-info" type="button" :disabled="checkPasswordGroupError()">提交</button>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<aui-debug :data="getData()"></aui-debug>
`;

var othertemplate = `
<div class="form-group" aui-required="">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">手机</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="form-control" type="text"
    v-model="form.data.v5.value"            
    v-input-validate="form.element.v5">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    类型
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <aui-radiogroup :radios="radios" v-model="form.data.v6.value"></aui-radiogroup>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    多选
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <aui-checkboxgroup :checkboxs="checks" v-model="form.data.v7.value"></aui-checkboxgroup>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>
`;

var datetemplate = `
<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">日期</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
 <aui-daterange ref="datepicker"></aui-daterange>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>
`;

var filetemplate = `
<div class="form-group aui-position-relative">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">文件</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
 <aui-file ref="file" 
    @changefilesuccess="onFileChange" 
    @uploadsuccess="onUploadSuccess"
    @uploaderror="onUploadError"
    ></aui-file>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
   <span class="aui-color-danger" v-if="uploaderror">{{errorMsg}}</span> 
</div>
</div>

<img class="aui-position-absolute" style="right: 0; top: 0;" 
    v-if="uploadpath" :src="uploadpath" ref="previewfile" height="70" alt="Image preview...">
</div>
`;

class UiExampleForm extends window.AUI.BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            getData() {
                var self = this;
                var data = self.form.getData();
                return {
                    password: data.v1,
                    new_password: data.v2,
                    confirm_password: data.v3
                }
            },
            getOtherData() {
                var self = this;
                var data = self.form.getData();
                var range = {
                    start_time: "",
                    end_time: ""
                };
                if (self.$refs.datepicker) {
                    range = self.$refs.datepicker.getValue();
                }
                var ret = {
                    phone: data.v5,
                    type: data.v6,
                    list: data.v7,
                    start_time: range.start_time,
                    end_time: range.end_time
                };
                if (self.serverPath) {
                    ret.uploadpath = self.serverPath;
                }
                return ret;
            },
            checkPasswordGroupError() {
                var self = this;
                return self.form.checkErrorByfieldkeys(["v1", "v2", "v3"]);
            },
            checkOtherGroupError() {
                var self = this;
                return self.form.checkErrorByfieldkeys(_.keys(self.form.constraints).filter(function (v) {
                    return ["v1", "v2", "v3", "v4"].indexOf(v) < 0;
                }));
            }
        }
    }
    _traits() {
        return [
            {
                _data() {
                    var ret = {};
                    ret.errorMsg = "为什么会错误";
                    ret.uploadpath = "";
                    ret.serverPath = "";
                    ret.uploaderror = false;
                    return ret;
                },
                _methods() {
                    return {
                        onFileChange(data) {
                            data.upload();
                        },
                        checkFile(file) {
                            this.uploaderror = false;
                            this.errorMsg = "";
                            this.serverPath = "";
                            if (!file.name) {
                                return false;
                            }
                            if ((file.size / 1024) > 4900 ) {
                                this.uploaderror = true;
                                this.errorMsg = "文件大于5M";
                                return false;
                            }
                            var type = file.name.split('.').pop();
                            var types = ["png", "gif", "jpg"];
                            if (types.indexOf(type) < 0) {
                                this.uploaderror = true;
                                this.errorMsg = "文件不是png,gif,jpg类型";
                                return false;
                            }
                            return true;
                        },
                        onUploadSuccess(file, data, response) {
                            try {
                                var s = JSON.parse(data);
                                this.uploadpath = s.file_path;
                                this.serverPath = s.file_path;
                            } catch(e) {
                                this.uploaderror = true;
                                this.errorMsg = "格式错误";
                            }
                        },
                        onUploadError(file, errorCode, errorMsg) {
                            this.uploaderror = true;
                            this.errorMsg = "网络错误";
                        }
                    }
                }
            }
        ]
    }
    _template() {
        var self = this;
        return `<div class="${self._name}"> 
<form ref="form" class="form-validation" action="">
${passwordtemplate}

<div class="aui-layout aui-layout-grid">
<div class="aui-layout__item aui-col-xs-12">
<aui-codeshow ref="code" language="html" :value="field"></aui-codeshow>
</div>
</div>

<div class="form-group">
<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">
        <h5>常用表单检测</h5>
        <hr better/>
    </div>
</div>
</div>

<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    用户类型
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <aui-select v-model="form.data.v4.value" :options="options">
        <aui-select-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"                                                  
          :value="item.value"                         
        ></aui-select-option>
    </aui-select>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

${othertemplate}

${datetemplate}

${filetemplate}

<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <button class="btn btn-info" type="button" :disabled="checkOtherGroupError()">提交</button>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<aui-debug :data="getOtherData()"></aui-debug>

</form>

<div class="aui-layout aui-layout-grid">
    <div class="aui-layout__item aui-col-xs-12">
        <h5>文档</h5>
        <hr better/>
<script type="x-template" id="uigriddoc">### 验证插件  
[validate.js](https://validatejs.org/)

#### 默认formfield定义
    {
        validate: {
            presence: true,
        },
        attr: {
            value: "",
        }
    }
    
|参数名|用处|
| ------| ------ |
|validate | 验证规则|
|onValidate | 验证回调|
|attr | 属性定义|

#### formfields定义
    ret.formFields = window.AUI.Utils.defineFormRules({
        "v1": "v1",
        "v2": {
            validate: {
                presence: false,
            }
        },
        "v5": window.AUI.Formfield.phone()
    }）        

可以是string 可以是部分定义  可以使用预先定义好的规则

#### 在vue data方法里创建 form
    ret.form = window.AUI.Validator.genForm(ret.formFields, _.keys(ret.formFields));    
    
#### form方法 

|方法名|参数|用处|
| ------| ------ | ------ |
|validateAll | excludeFieldKeys:Array |验证表单|
</script>
    </div>   
</div> 
<aui-markdown class="markdown-body" :value="doc"></aui-markdown>
</div>`;
    }
    _mounted() {
        var self = this;
        self.doc = document.getElementById("uigriddoc").innerHTML.trim();
        self.field = `
<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    旧密码
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="form-control" type="password"
    v-model="form.data.v1.value"            
    v-input-validate="form.element.v1">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    新密码
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="form-control" type="password" 
    v-model="form.data.v2.value"            
    v-input-validate="form.element.v2">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
(不要少于6位)
</div>
</div>
</div>

<div class="form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    确认密码
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="form-control" type="password"
    v-model="form.data.v3.value"            
    v-input-validate="form.element.v3">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>        
        `;
        window.AUI.Validator.genFormValidate(self, "form");
        self.form.validateAll();
        window.AUI.Loader.loadScript(
            '//cdn.bootcss.com/bootstrap-datepicker/1.7.0/js/bootstrap-datepicker.min.js'
        ).then(function (firstLoad) {
            if (firstLoad) {
                $.fn.datepicker.dates['zh-CN'] = {
                    days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
                    daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                    daysMin:  ["日", "一", "二", "三", "四", "五", "六"],
                    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                    monthsShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
                    today: "今日",
                    clear: "清除",
                    format: "yyyy年mm月dd日",
                    titleFormat: "yyyy年mm月",
                    weekStart: 1
                };
            }
            self.$refs.datepicker.init();
            self.$refs.datepicker.setStartDate(window.AUI.Utils.getDate('before', 6));
            self.$refs.datepicker.setEndDate(window.AUI.Utils.getDate('before', 0))
        });

        window.AUI.Loader.loadScript(
            {
                src: "//cdn.bootcss.com/prism/9000.0.1/prism.min.js",
                dataManual: true
            }
        ).then(function () {
            if (self.$refs.code) {
                self.$refs.code.highlight();
            }
        });

        self.$refs.file.setUploadPath(rootcontroller.getUploadUrl());
        self.$refs.file.checkFile = function (file) {
            return self.checkFile(file);
        };

    }
    _data() {
        var ret = {};
        ret.doc = '';
        ret.field = ``;
        ret.radios = [
            {
                label: "label1",
                value: 0
            },
            {
                label: "label2",
                value: 1
            }
        ];
        ret.checks = [
            {
                label: "checkbox1",
                value: 0
            },
            {
                label: "checkbox2",
                value: 1
            }
        ];
        ret.options = [{
            value: '',
            label: '全部'
        }];
        ret.formFields = window.AUI.Utils.defineFormRules({
            "v1":  {
                validate: {
                    presence: false,
                }
            },
            "v2": window.AUI.Formfield.linkEqualMain("v3", "",
                {
                    validate: {
                        presence: true,
                        length: {
                            minimum: 6
                        }
                    }
                }
            ),
            "v3": window.AUI.Formfield.linkEqualSub("v2"),
            "v4": "v4",
            "v5": window.AUI.Formfield.phone(),
            "v6":  {
                attr: {
                    value: ret.radios[1].value
                }
            },
            "v7":  {
                attr: {
                    value: [ret.radios[1].value]
                }
            }
        });
        ret.form = window.AUI.Validator.genForm(ret.formFields, _.keys(ret.formFields));
        ret.components = [];
        return ret;
    }
}

window.AUI.customCompoents.define("ui-example-form", UiExampleForm);

module.exports = {
    template: `
        <div class="anu-subpage" style="width: 100%;">          
            <ui-example-form></ui-example-form>
        </div>
    `,
    data() {
        var ret = {};
        return ret;
    },
    mounted() {
        var self = this;
        rootcontroller.getPage(self).attachChildComponentReady();
    },
    methods: {
        service() {
        },
        onError(e) {
            console.log('-------------------');
            console.log(e);
            console.log('-------------------');
        }
    }
};